<template>
  <div>
    <a-drawer
      :title="title"
      :width="1020"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <div class="contetnBox">
        <div class="headerBox">
          <a-button type="primary" @click="handleAdd">新增授权页面</a-button>
          <!-- <a-button type="primary"  @click="handleAdd"
            >批量删除</a-button
          > -->
        </div>
        <br />
        <a-table
          v-if="tableData.length > 0"
          :columns="columns"
          :data-source="tableData"
          :loading="loading"
          :pagination="false"
          childrenColumnName="childList"
          @change="handleTableChange"
          defaultExpandAllRows
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
          }"
          :rowKey="
            (record, index) => {
              return record.id;
            }
          "
        >
          <template slot="action" slot-scope="text, record">
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm
              okText="确定"
              cancelText="取消"
              v-if="tableData.length"
              title="确定删除吗?"
              @confirm="() => handleDelete(record)"
            >
              <a>删除</a>
            </a-popconfirm>
          </template>
        </a-table>
        <PermissionModal
          ref="modalForm"
          :treeData="tableData"
          @ok="modalFormOk"
        />
      </div>
      <div class="footer_btn">
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          关闭
        </a-button>
        <a-button type="primary" @click="handleSubmit">
          保存
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>
import { tableMinxins } from "@/unit/mixins/tableMinxins.js";
import PermissionModal from "./PermissionModal.vue";
import { permissionColumns } from "./tableConfig";
import { SwitchNumber, FindObjFromList } from "@/unit/tool";
import api from "@/api/apiServer";

export default {
  mixins: [tableMinxins],
  components: { PermissionModal },
  props: {
    userId: {
      type: Number,
      default: 0,
    },
    resources: {
      type: String,
    },
  },
  data() {
    return {
      title: "角色授权",
      visible: false,
      columns: permissionColumns,
    };
  },
  methods: {
    showDrawer(resources) {
      this.visible = true;
      this.getList();
      if (resources !== null) {
        this.setPermission(resources);
      }
    },
    setPermission(resources) {
      this.selectedRowKeys = SwitchNumber(resources);
    },
    modalFormOk() {
      this.getList();
    },
    // 获取列表数据
    async getList() {
      const res = await api.ResourcesTree();
      this.tableData = res.data;
    },
    onSelectChange(selectedRowKeys, selectedKeys) {
      let haveParent = false;
      selectedKeys.forEach((el) => {
        if (el.parentId != 0 && selectedRowKeys.indexOf(el.parentId) == -1) {
          haveParent = true;
          selectedRowKeys.push(el.parentId);
          let obj = FindObjFromList(this.tableData, "id", el.parentId);
          if (Object.keys(obj).length) {
            selectedKeys.push(obj);
          }
        }
      });
      if (haveParent) {
        this.onSelectChange(selectedRowKeys, selectedKeys);
      }
      this.selectedRowKeys = selectedRowKeys;
    },
    async handleSubmit() {
      let resources = this.selectedRowKeys.toString();
      const params = {
        id: this.userId,
        resources,
      };
      const res = await api.RoleEdit(params);
      this.$message.success(res.message);
      this.$emit("ok");
      this.visible = false;
      this.getList();
      this.selectedKeys = [];
      this.tableData = [];
    },
    // 删除
    async handleDelete(record) {
      let params = {
        userName: record.userName,
        id: record.id,
      };
      const res = await api.ResourcesDelete(params);
      this.$message.success(res.message);
      this.getList();
    },

    onClose() {
      this.visible = false;
      this.selectedKeys = [];
      this.tableData = [];
    },
  },
};
</script>

<style lang="less" scoped>
.contetnBox {
  button {
    margin-right: 13px;
  }
  min-height: 770px;
  border: 1px solid #ebedf0;
  border-radius: 2px;
  padding: 20px 0;
  .headerBox {
    padding: 0 20px 0 35px;
  }
}
.footer_btn {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  text-align: right;
  z-index: 1;
}
</style>
